<template>
	<div class="app-container">
		<div class="header">
			<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />添加客户信息
		</div>
		<el-tabs type="border-card">
			<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
				<el-tab-pane label="基本信息">
					<el-scrollbar max-height="380px">
						<el-form-item prop="customerName" label="企业名称">
							<el-input v-model="form.customerName" style="width: 50%" placeholder="请输入企业名称" />
						</el-form-item>
						<el-form-item prop="customerCategory" label="企业分类">
							<el-select v-model="form.customerCategory" placeholder="选择分类" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in customer_category" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item prop="areaId" label="所在地区">
							<Address
								style="display: inline-block; position: relative; width: 800px"
								v-model:provinceId="form.provinceId"
								v-model:cityId="form.cityId"
								v-model:areaId="form.areaId"
							/>
						</el-form-item>
						<el-form-item prop="customerAdress" label="企业地址">
							<el-input v-model="form.customerAdress" style="width: 50%" placeholder="请输入企业详细地址" />
						</el-form-item>
						<el-form-item prop="customerMobile" label="企业电话">
							<el-input v-model="form.customerMobile" style="width: 50%" placeholder="请输入企业电话" />
						</el-form-item>
						<el-form-item prop="customerWebSite" label="企业网站">
							<el-input v-model="form.customerWebSite" style="width: 50%" placeholder="请输入企业网站" />
						</el-form-item>
						<el-form-item prop="isOpen" label="是否公共库">
							<el-checkbox style="position: relative; top: -3px" true-label="1" false-label="2" v-model="form.isOpen" label="公共库" size="large" />
						</el-form-item>
						<el-form-item prop="customerNote" label="备注">
							<el-input v-model="form.customerNote" :rows="8" type="textarea" style="margin-bottom: 5px" placeholder="企业其它备注信息" />
						</el-form-item>
					</el-scrollbar>
				</el-tab-pane>
				<!-- <el-tab-pane label="附属信息">
					<el-form-item prop="customerType" label="企业类型">
						<el-select v-model="form.customerType" placeholder="请选择" style="width: 50%" size="default" clearable>
							<el-option v-for="dict in customer_type" :key="dict.value" :label="dict.label" :value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item prop="administrationLevel" label="行政级别">
						<el-select v-model="form.administrationLevel" placeholder="请选择" style="width: 50%" size="default" clearable>
							<el-option v-for="dict in administration_level" :key="dict.value" :label="dict.label" :value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item prop="waterSupply" label="日供水量">
						<el-select v-model="form.waterSupply" placeholder="请选择" style="width: 50%" size="default" clearable>
							<el-option v-for="dict in water_supply" :key="dict.value" :label="dict.label" :value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item prop="groupId" label="所属集团">
						<el-select
							v-model="form.groupId"
							placeholder="请选择"
							style="width: 50%"
							filterable
							remote
							reserve-keyword
							remote-show-suffix
							:remote-method="remoteMethod"
							:loading="loading"
						>
							<el-option v-for="dict in options" :key="dict.value" :label="dict.label" :value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item prop="waterNumber" label="水厂数量">
						<el-input-number :controls="false" :precision="0" v-model="form.waterNumber" style="width: 50%" placeholder="请输入水厂数量" />
					</el-form-item>
				</el-tab-pane> -->
				<el-tab-pane label="联系人信息">
					<el-scrollbar max-height="380px">
						<div v-for="(item, index) in form.customerContactsList" :key="index">
							<el-button type="danger" style="position: relative; left: 95%" link :icon="Delete" @click="deleteLian(index)">删除</el-button>

							<el-button
								v-if="index == form.customerContactsList.length - 1"
								type="primary"
								style="position: relative; left: 85%"
								:icon="Plus"
								link
								@click="addLian"
								>添加</el-button
							>
							<el-form-item
								:prop="`customerContactsList[${index}].contactsName`"
								label="联系人"
								:rules="[{ required: true, message: `联系人${index+1}不能为空`, trigger: 'blur' }]"
							>
								<el-input v-model="item['contactsName']" style="width: 50%" placeholder="" />
							</el-form-item>
							<el-form-item label="性别">
								<el-radio-group v-model="item['contactsSex']">
									<el-radio :label="1">先生</el-radio>
									<el-radio :label="2">女士</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="角色">
								<el-select v-model="item['contactsRole']" placeholder="请选择" style="width: 50%" size="default" clearable>
									<el-option v-for="dict in contacts_role" :key="dict.value" :label="dict.label" :value="dict.value" />
								</el-select>
							</el-form-item>
							<el-form-item
								:prop="`customerContactsList[${index}].contactsJob`"
								label="职位"
								:rules="[{ required: true, message: `职位${index+1}不能为空`, trigger: 'blur' }]"
							>
								<el-input v-model="item['contactsJob']" style="width: 50%" placeholder="" />
							</el-form-item>
							<el-form-item
								:prop="`customerContactsList[${index}].contactsMobile`"
								label="手机号码"
								:rules="[{ required: true, message: `手机号码${index+1}不能为空`, trigger: 'blur' }]"
							>
								<el-input v-model="item['contactsMobile']" style="width: 50%" placeholder="" />
							</el-form-item>
							<el-form-item label="邮箱">
								<el-input v-model="item['contactsEmail']" style="width: 50%" placeholder="" />
							</el-form-item>
							<el-divider />
						</div>
					</el-scrollbar>
				</el-tab-pane>
				<!-- <el-tab-pane label="当前实验室信息">
					<el-scrollbar max-height="380px">
						<el-form-item label="建成年份">
							<el-input v-model="form.labYear" style="width: 50%" placeholder="" />
						</el-form-item>
						<el-form-item label="实验室地址">
							<el-input v-model="form.labAdress" style="width: 50%" placeholder="" />
						</el-form-item>
						<el-form-item label="供水检测">
							<el-input v-model="form.labWaterSupply" style="width: 50%" placeholder="" />
						</el-form-item>

						<el-form-item label="污水检测">
							<el-input v-model="form.labWaterFoul" style="width: 50%" placeholder="" />
						</el-form-item>
						<el-form-item label="环境检测">
							<el-input v-model="form.labEnvironment" style="width: 50%" placeholder="" />
						</el-form-item>
						<el-form-item label="检测类型">
							<el-radio-group v-model="form.labDetectionType">
								<el-radio v-for="item in lab_detection_type" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="实验室级别">
							<el-select v-model="form.labLevel" placeholder="请选择" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in lab_level" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="实验室人员">
							<el-select v-model="form.labMember" placeholder="请选择" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in lab_member" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="实验室面积">
							<el-select v-model="form.labArea" placeholder="请选择" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in lab_area" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="认证">
							<el-radio-group v-model="form.conscientiousType">
								<el-radio v-for="item in conscientious_type" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="建设规划">
							<el-select v-model="form.labPlanBuild" placeholder="请选择" style="width: 50%" size="default" clearable>
								<el-option v-for="dict in lab_plan_build" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="预计时间">
							<el-date-picker
								clearable
								v-model="form.labPlanTime"
								style="width: 240px"
								value-format="YYYY-MM-DD HH:mm:ss"
								type="datetime"
								:placeholder="`请选择`"
							></el-date-picker>
						</el-form-item>
						<el-form-item label="LIMS状态">
							<el-radio-group v-model="form.labLimsStatus">
								<el-radio v-for="item in lab_lims_status" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="LIMS规划">
							<el-radio-group v-model="form.labLimsPlan">
								<el-radio v-for="item in lab_lims_plan" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-scrollbar>
				</el-tab-pane> -->
				<el-tab-pane label="财务信息">
					<el-form-item prop="financeAccountName" label="户名">
						<el-input v-model="form.financeAccountName" style="width: 50%" placeholder="" />
					</el-form-item>
					<el-form-item prop="financeAccountBlank" label="开户行">
						<el-input v-model="form.financeAccountBlank" style="width: 50%" placeholder="" />
					</el-form-item>
					<el-form-item prop="financeAccountNumber" label="账号">
						<el-input v-model="form.financeAccountNumber" style="width: 50%" placeholder="" />
					</el-form-item>
					<el-form-item prop="financeUnifiedCode" label="统一编码">
						<el-input v-model="form.financeUnifiedCode" style="width: 50%" placeholder="" />
					</el-form-item>
					<el-form-item prop="financeAdress" label="地址">
						<el-input v-model="form.financeAdress" style="width: 50%" placeholder="" />
					</el-form-item>
					<el-form-item prop="financeMobile" label="电话">
						<el-input v-model="form.financeMobile" style="width: 50%" placeholder="" />
					</el-form-item>
					<el-form-item label="附件">
						<el-upload
							v-model:file-list="fileList"
							:action="imgUrl"
							ref="upload"
							accept=".jpg,.jpeg,.png"
							:show-file-list="false"
							:limt="1"
							:headers="token"
							name="files"
							:on-success="handleSuccess"
						>
							<el-input disabled v-model="form.financeFile" style="margin-right: 20px" placeholder="" /><el-button type="primary">上传</el-button>
						</el-upload>
						<el-button style="margin-left: 20px" type="primary" @click="handlePictureCardPreview">预览</el-button
						><el-button @click="handleRemove" type="primary">删除</el-button>
						<span style="color: red; margin-left: 15px"> *&nbsp;只能上传图片 </span>
					</el-form-item>
				</el-tab-pane>
			</el-form>
		</el-tabs>
		<div style="line-height: 80px; height: 80px; padding-left: 100px">
			<el-button type="primary" @click="submit">提交</el-button>
			<el-button @click="reback">返回</el-button>
		</div>
		<el-dialog v-model="dialogVisible">
			<img v-full :src="pre + form.financeFile" alt="Preview Image" />
		</el-dialog>
	</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'
import Address from '@/components/Address/index'
import { addCustom } from '@/api/custom/custom'
// import { selectGroup } from '@/api/custom/group'
import useTagsViewStore from '@/store/modules/tagsView'
const tagsView = useTagsViewStore()
const { proxy } = getCurrentInstance()
const {
	customer_category,
	contacts_role
} = proxy.useDict(
	'customer_category',
	'customer_type',
	'administration_level',
	'water_supply',
	'is_open',
	'contacts_role',
	'lab_detection_type',
	'lab_level',
	'lab_member',
	'lab_area',
	'lab_lims_status',
	'lab_lims_plan',
	'conscientious_type',
	'lab_plan_build'
)
import { getConfigKey } from '@/api/system/config'
import { getToken } from '@/utils/auth'
const imgUrl = ref('')
getConfigKey('img_upload').then((response) => {
	imgUrl.value = response.msg
})
const pre = ref('')
getConfigKey('sys.upload').then((response) => {
	pre.value = response.msg
})
const token = { Authorization: 'Bearer ' + getToken() }
const router = useRouter()
const baseform = ref()

const form = reactive({
	customerName: '',
	customerCategory: '',
	customerAdress: '',
	provinceId: undefined,
	cityId: undefined,
	areaId: undefined,
	customerMobile: '',
	customerWebSite: '',
	customerNote: '',
	customerType: '',
	administrationLevel: '',
	waterSupply: '',
	groupId: '',
	isOpen: '2',
	waterNumber: undefined,
	customerContactsList: [
		{
			contactsName: '',
			contactsSex: '',
			contactsRole: '',
			contactsJob: '',
			contactsMobile: '',
			contactsEmail: ''
		}
	],
	// labYear: '',
	// labAdress: '',
	// labWaterSupply: '',
	// labWaterFoul: '',
	// labEnvironment: '',
	// labDetectionType: '',
	// labLevel: '',
	// labMember: '',
	// labArea: '',
	// conscientiousType: '',
	// labPlanBuild: '',
	// labPlanTime: '',
	// labLimsStatus: '',
	// labLimsPlan: '',
	financeAccountName: '',
	financeAccountBlank: '',
	financeAccountNumber: '',
	financeUnifiedCode: '',
	financeAdress: '',
	financeMobile: '',
	financeFile: ''
})
// const rules = {
// 	customerName: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
// 	customerCategory: [
// 		{ required: true, message: '企业分类不能为空', trigger: 'blur' },
// 		{ min: 1, message: '企业分类不能为空', trigger: 'blur' }
// 	],
// 	customerAdress: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
// 	areaId: [{ required: true, message: '所在地区不能为空', trigger: 'blur' }],
// 	customerMobile: [{ required: true, message: '企业电话不能为空', trigger: 'blur' }],
// 	financeAdress: [{ required: true, message: '开户不能为空', trigger: 'blur' }],
// 	financeMobile: [{ required: true, message: '开户电话不能为空', trigger: 'blur' }]
// }
// const list = ref([])
// const options = ref([])
// const loading = ref(false)
// selectGroup().then((res) => {
// 	list.value = res.map((e) => {
// 		return {
// 			label: e.groupName,
// 			value: e.groupId
// 		}
// 	})
// 	options.value = list.value
// })
// const remoteMethod = (query) => {
// 	if (query) {
// 		loading.value = true
// 		setTimeout(() => {
// 			loading.value = false
// 			options.value = list.value.filter((item) => {
// 				return item.label.toLowerCase().includes(query.toLowerCase())
// 			})
// 		}, 200)
// 	} else {
// 		options.value = list.value
// 	}
// }
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const addLian = () => {
	if(form.customerContactsList.length == 3){
		proxy.$modal.msgError('上限为3条！')
		return
	}
	form.customerContactsList.push({
		contactsName: '',
		contactsSex: '',
		contactsRole: '',
		contactsJob: '',
		contactsMobile: '',
		contactsEmail: ''
	})
}
const deleteLian = (index) => {
	if (form.customerContactsList.length == 1) {
		proxy.$modal.msgError('无法删除最后一条！')
		return
	}
	proxy.$modal
		.confirm('是否确认此操作？')
		.then(() => {
			form.customerContactsList.splice(index, 1)
			proxy.$modal.msgSuccess('删除成功')
		})
		.catch(() => {})
}

const handlePictureCardPreview = (uploadFile) => {
	dialogImageUrl.value = uploadFile.url
	dialogVisible.value = true
}
const upload = ref('')
const fileList = ref([])
const handleSuccess = (res) => {
	form.financeFile = res.data[0]
}
const handleRemove = () => {
	form.financeFile = ''
}

const submit = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			addCustom(form).then((res) => {
				proxy.$modal.msgSuccess('新增成功！')
				tagsView.delView(router.currentRoute.value)
				router.go(-1)
			})
		} else {
			let s = ''
			for (let i in e) {
				s += e[i][0].message + '；'
			}
			proxy.$modal.msgError(s)
		}
	})
}

const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	margin-bottom: 5px;
}
</style>
